<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>主页</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="css/search.css">
    <link rel="icon" href="images/logo.jpg" type="image/x-icon" />
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/axure/axQuery.js"></script>
    <script src="resources/scripts/axure/globals.js"></script>
    <script src="resources/scripts/axutils.js"></script>
    <script src="resources/scripts/axure/annotation.js"></script>
    <script src="resources/scripts/axure/axQuery.std.js"></script>
    <script src="resources/scripts/axure/doc.js"></script>
    <style type="text/css">
        #title {
            text-align: center;
            font-size: 90px;
            font-family: "STHupo";
        }

        .dian {
            font-size: 40px;
            float: right;
        }

        a {
            color: #000;
            text-decoration: none;
        }

        a:hover {
            background-color: rgba(255, 255, 255, 0.6);
            color: rgb(0, 0, 0);
        }
    </style>
    <style type="text/css">
         html{height:100%}    
         body{
            height:650px;
            margin-top:200px;
            margin-left: 50px;
            margin-right: 50px;
            padding:0px;
            background-image: url(./images/b1.png);
            /* 背景图垂直、水平均居中 */
            background-position: center center;
            /* 背景图不平铺 */
            background-repeat: no-repeat;
            /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
            background-attachment: fixed;
            /* 让背景图基于容器大小伸缩 */
            background-size: cover;
            /* 设置背景颜色，背景图加载过程中会显示背景色 */
            background-color: #464646;
        }    
         #container{
            overflow: hidden;
            height:100%;
            margin: 0;
            font-family: "微软雅黑";
        }
        #l-map{overflow: hidden;
            height:450px;
            margin: 0;
            font-family: "微软雅黑";}
		#r-result{width:100%;}

        .info {
        z-index: 999;
        width: auto;
        min-width: 22rem;
        padding: .75rem 1.25rem;
        margin-left: 1.25rem;
        position: fixed;
        top: 1rem;
        background-color: #fff;
        border-radius: .25rem;
        font-size: 14px;
        color: #666;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
    } 
    </style>
</head>
<body>
    <div id="head">
        <b>
            <div class="separt1"><div style="height: 10px;"></div><span class="logo">文化遗址系统</span></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="index.html"><span>主页</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="luxian.html"><span>路线</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="collect.html"><span>去收藏</span></a></div>
            <div class="separt"><div style="height: 10px;"></div><a class="change" href="box.html"><span>收藏夹</span></a></div>
        </b>
        </div>
        <div id="search">
            <div id="sehead">
                <b style="font-family:'STCaiyun'";>文化遗址系统</b> 
            </div>
            <div class="kong"></div>
            <div class="sea">
                <input id="cha" type="text" class="seinput" autocomplete="off" value="" name="q" placeholder="请输入要查询的文化遗址" required="true" x-webkit-speech="" x-webkit-grammar="builtin:search">
                <input id="chabutton" type="submit" align="absmiddle" value="查询" class="sebutt" name="button1" onclick="chaxun()">
                
            </div>
            <div>

            </div>
        </div>

        <div id="l-map"></div>
	    <div id="r-result"></div>
        <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&&type=webgl&ak=GWKMwlzTUGmMqnKCp5rxq6nRsDmefBCW">
        </script>
        <script type="text/javascript">
            var map = new BMapGL.Map("l-map");            // 创建Map实例
            map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
            map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
            var local = new BMapGL.LocalSearch(map, {
                renderOptions: {map: map, panel: "r-result"}
            });
            local.search("文化遗址");
        </script>
        <script>
            function chaxun() {
            word = document.getElementById("cha").value;
            if (word != ""){
               window.location = 'search.html?word=' + word
            }
               
            else
            {
                alert('请输入要查询的地址！')
                window.location.reload()
            } 
        }
        </script>
</body>
</html>
